<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>
<body>
    <div id="app"></div>
    <script>
        new Vue({
            el:'#app',
            // 有template会优先template，而不是el表达式
            template:'<h1>Vue</h1>',
            data:{
                msg:'vue computed',
            },
            methods:{},
            whtch:{},
            computed:{},
            directives:{},
            filters:{},
            // 生命周期函数--有先后顺序的
            beforeCreated(){
                // 实例初始化之后，数据观测和事件配置之前被调用
                console.log(this.msg);//这个时候是拿不到打data中的数据，undefined
                console.log('1:beforeCreated');
            },
            created(){
                // 实例创建后，立刻调用
                // 此时是可以取到data中的数据的。
                // 一般发送数据请求，然后赋值
                console.log('2:created');
            },
            beforeMount(){
                // 挂载之前被调用
                console.log('3:beforeMount');
                // 这里的el拿到的是el选中的元素
                console.log(this.$el);
            },
            mounted(){
                // el被创建的vm.$el替换，并挂载到实例上调用
                console.log('4:mounted');
                // 这里的el，如果写了template则打印的是template的元素，否则打印的是el选中的元素
                console.log(this.$el);
                // 渲染后的只能在这拿，因为有替换的过程
            },
            beforeUpdate(){
                console.log('在数据更新之前调用');
            },
            updated(){
                console.log('在数据更新之后调用');
            },
            beforeDestory(){
                console.log('销毁之前调用');
            },
            destoryed(){
                console.log('销毁之后调用');
            }
        })
    </script>
</body>
</html>